<template>
    <el-row>
        <!-- 头部数据开始 -->
        <el-row :gutter="10">
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo class="text-purple fs-xxl" :start-val="0" :end-val="baseObj.CountArticles" :duration="3000" />                        
                        <em class="text-purple-1 ml-5">篇</em>
                    </div>
                    <div class="bg-black p-5">总文章数</div>
                </page-main>
            </el-col>
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo class="text-blue fs-xxl" :start-val="0" :end-val="baseObj.DayArticles" :duration="3000" />
                        <em class="text-blue-1 ml-5">篇</em>
                    </div>
                    <div class="bg-black p-5">日新增文章数</div>
                </page-main>
            </el-col>
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo class="text-blue-2 fs-xxl" :start-val="0" :end-val="baseObj.CountComments" :duration="3000" />
                        <em class="text-blue-3 ml-5">条</em>
                    </div>
                    <div class="bg-black p-5">评论总数</div>
                </page-main>
            </el-col>
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo class="text-green fs-xxl" :start-val="0" :end-val="baseObj.DayComments" :duration="3000" />
                        <em class="text-green-1 ml-5">条</em>
                    </div>
                    <div class="bg-black p-5">日新增评论数</div>
                </page-main>
            </el-col>            
        </el-row>
        <!-- 头部数据结束 -->

        <!-- 第二行开始 -->
        <el-row>
            <el-col :md="24" :lg="16">
                <page-main>
                    <MonthArticles :cdata="mouthArticles" />
                </page-main>
            </el-col>
            <el-col :md="24" :lg="8">
                <page-main>
                    <ClassifyArticles :cdata="classifyArticles" />
                </page-main>
            </el-col>
        </el-row>
        <!-- 第二行结束 -->   

        <!-- 第三行开始 -->
        <el-row>
            <el-col :md="24" :lg="24">
                <page-main>
                    <ClassifyAccess :cdata="classifyAccess" />
                </page-main>
            </el-col>            
        </el-row>
        <!-- 第三行结束 -->
    </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import MonthArticles from '@/echart/components/MonthArticles'
import ClassifyArticles from '@/echart/components/ClassifyArticles'
import ClassifyAccess from '@/echart/components/ClassifyAccess'
import {Base, addMouthArtices, addClassifyArticles, addClassifyAccess} from '@/api/home'

export default {
    components: {
        MonthArticles,
        ClassifyArticles,
        ClassifyAccess,        
        CountTo
    },
    data() {
        return {
            baseObj: {}, // 文章、评论基础数据
            mouthArticles: {
                xData: [],
                sData: []
            }, // 月新增文章数
            classifyArticles: {
                lData: [],
                sData: []
            }, // 分类文章数量比
            classifyAccess: {
                lData: [],
                xData: [],
                sData: []
            }, // 分类访问量
            timing: null // 定时器
        }
    },
    mounted() {
        this.changeTiming()
    },
    destroyed() {
        clearInterval(this.timing)
    },
    methods: {

        /**
         * @description: 定时刷新数据
         * @param {*}
         * @return {*}
         * @author: Yu
         */        
        changeTiming() {
            this.getBaseData()
            this.getAddMouthArticesData()
            this.getClassifyArticlesData()
            this.getClassifyAccessData()
            this.timing = setInterval(() => {
                this.getBaseData()
                this.getAddMouthArticesData()
                this.getClassifyArticlesData()
                this.getClassifyAccessData()               			 	
            }, 1000 * 5)
        },

        /**
         * @description: 获取首页文章、评论基础数据
         * @param {*}
         * @return {*}
         * @author: Yu
         */        
        async getBaseData() {            
            const {data: res} = await Base()
            this.baseObj = res            
        },

        /**
         * @description: 获取月新增文章数
         * @param {*}
         * @return {*}
         * @author: Yu
         */        
        async getAddMouthArticesData() {             
            const {data: res} = await addMouthArtices()            
            this.mouthArticles.xData = res.time
            this.mouthArticles.sData = res.nums
        },

        /**
         * @description: 获取分类文章数量比
         * @param {*}
         * @return {*}
         * @author: Yu
         */        
        async getClassifyArticlesData() {             
            const {data: res} = await addClassifyArticles()
            this.classifyArticles.lData = res.lData
            this.classifyArticles.sData = res.sData
        },

        /**
         * @description: 获取分类访问量
         * @param {*}
         * @return {*}
         * @author: Yu
         */        
        async getClassifyAccessData() {             
            const {data: res} = await addClassifyAccess()                               
            this.classifyAccess.lData = res.lData
            this.classifyAccess.xData = res.xData
            this.classifyAccess.sData = res.sData
        }
    }
}
</script>

